<template>
<uni-section title="官方榜" type="line" padding>
  <uni-card 
  v-for="(item ,index) in  list.filter(val => val.ToplistType)"
  :title="item.name" 
  :sub-title="item.playCount" 
  :extra="item.updateFrequency"
  @click="goSongList(item.id)"
  :thumbnail="item.coverImgUrl">
		<text class="uni-body" style="font-size: 12px;">
      <view v-for="(val,i) in item.tracks">
        <text><text style="font-weight: 600;">{{ i + 1 }}.{{ val.first }}</text> -{{ val.second }}</text>
      </view>
    </text>
	</uni-card>
</uni-section>
<uni-section title="其他榜单" type="line" padding>
  <uni-grid :column="3"  :showBorder="false">
      <uni-grid-item 
      v-for="(item, index) in list.filter(val => !val.ToplistType)" 
      :index="index"
      @click="goSongList(item.id)"
      :key="index"
      >
        <view class="grid-item-box">
          <image :src="item.coverImgUrl" class="image" mode="aspectFill" />
        </view>
      </uni-grid-item>
	</uni-grid>
</uni-section>
</template>

<script setup lang="ts">
// 这里编写逻辑代码
import { ref } from 'vue'
import { rankingGetApi } from '../../services/index'
import type { rankingList } from '../../services/type'
const list = ref<rankingList[]>([])
rankingGetApi()
.then((res)=>{
  list.value = res.list
})
const goSongList = (id:number) => {
  uni.navigateTo({url:'/pages/songlist/songlist?' + 'id=' + id})
}

</script>

<style scoped lang="scss">
/* 这里编写样式代码 */
.uni-section ::v-deep .uni-section-header__decoration {
  background-color: #c84341;
}

.grid-item-box{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .image{
    width: 90%;
    height: 90%;
    border-radius: 6px;
  }
  .text{ 
    position: absolute;
    font-size: 40rpx;
    color: #fff;
    font-weight: 600;
  }
}

</style>